<template>
  <div style="min-width:1200px;" class="content">
   <div class="ipt">
    <el-input placeholder="请输入内容" v-model="inputName" style="width: 300px;" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="search(true)"></el-button>
      </el-input>
   </div>
   <div class="list">
    <div class="card" v-for="(item, index) in postList.slice((page-1)*pageSize,pageSize*page)" :key="index" :index="index">
        <div class="left">
          <div class="top">
            <div class="title">
              {{ item.post_name }}
              <span>{{ item.salary }}</span>
            </div>
          </div>
          <div class="center">
            <div class="title">
              <span>{{ item.address }}</span>
              <span>{{ item.education }}</span>
            </div>
          </div>
        </div>
        <div class="center">
          <div class="top">
            <div class="title">
              {{ item.trade_name }}
            </div>
          </div>
          <div class="center">
            <div class="title">
              <span>{{ item.industry }}</span>
              <span>{{ item.people_scale }}</span>
            </div>
          </div>
        </div>
        <div class="right">
          <el-button type="primary" v-if="item.post_state === 1">
            <i class="el-icon-star-off"></i>
            收藏</el-button>
          <el-button type="success" v-else @click="NostateFn(item.id)">
            <i class="el-icon-star-on" ></i>
            已收藏
          </el-button>
        </div>
      </div>
   </div>
   <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :page-size="pageSize" background layout="prev, pager, next" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { getStateAPI, updateNoStateAPI } from '../../../api/post'
export default {

  data() {
    return {
      postList: [],
      total: 1,
      pageSize:3,
      page: 1,
      inputName: '',
    };
  },

  mounted() {
    
  },

  methods: {
    async initGetState(){
      const res = await getStateAPI()
      console.log(res);
      if(res.status !== 200){
        console.log('获取收藏数据失败!');
      }else{
        console.log('获取收藏数据成功!');
        this.postList = res.data.data
        this.total = res.data.total
      }
    },
    handleSizeChange(val){
      this.pageSize = 1
      this.pageSize = val
    },
    handleCurrentChange(val){
      this.page = val
    },
    search(bool) {
      if (bool) {
        let newListData = []
        if (this.inputName) {
          this.postList.filter((item) => {
            if (item.post_name.indexOf(this.inputName) !== -1) {
              newListData.push(item)
            }
          });
        }
        this.postList = newListData;
      } else {
        this.initGetState()
      }
    },
    async NostateFn(id){
      const {data:res} = await updateNoStateAPI(id)
      if(res.status !== 0){
        console.log('取消收藏失败!');
      }else{
        console.log('取消收藏成功!');
        this.initGetState()
      }
    }
  },
  created(){
    this.initGetState()
  },
  watch: {
    inputName(newValue) {
      if (newValue) {
        this.search(true)
      } else {
        this.search(false)
      }
    }
  }
};
</script>

<style lang="less" scoped>

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgb(245, 246, 248);

  .ipt {
    display: flex;
    margin: 10px 25%;
  }

  .list {
    width: 100%;

    .card {
      width: 60%;
      margin-bottom: 10px;
      height: 100px;
      display: flex;
      margin: 10px 8%;
      flex-direction: row;
      background-color: #fff;
      border-radius: 5px;

      .left {
        width: 40%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .top {
          width: 100%;
          height: 50%;
          display: flex;
          flex-direction: row;

          .title {
            width: 80%;
            height: 100%;
            display: flex;
            align-items: center;
            padding-left: 15px;
            font-size: 1em;

            span {
              padding-left: 10px;
              color: red;
            }
          }

        }

        .center {
          width: 100%;
          height: 50%;
          display: flex;
          flex-direction: row;
          // background-color: beige;

          .title {
            width: 80%;
            height: 100%;

            span {
              margin-left: 15px;
              font-size: 12px;
              padding: 3px;
              color: gray;
              border-radius: 5px;
              background-color: rgb(247, 248, 250);
            }
          }
        }
      }

      .center {
        width: 40%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .top {
          width: 100%;
          height: 50%;
          display: flex;
          flex-direction: row;

          .title {
            width: 80%;
            height: 100%;
            display: flex;
            align-items: center;
            padding-left: 15px;
            font-size: 1em;

            span {
              padding-left: 10px;
              color: red;
            }
          }

        }

        .center {
          width: 100%;
          height: 50%;
          display: flex;
          flex-direction: row;
          // background-color: beige;

          .title {
            width: 80%;
            height: 100%;

            span {
              margin-left: 15px;
              font-size: 12px;
              padding: 3px;
              color: gray;
              border-radius: 5px;
              background-color: rgb(247, 248, 250);
            }
          }
        }
      }

      .right {
        width: 20%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .pagination {
    display: flex;
    margin: 10px 30%;
  }
}
</style>